<template>
	<view>
		<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
			title="申请退款">
		</u-navbar>
		<view class="flex-al-center" style="padding: 5px 0 5px 15px;background-color: #FFFBE6;">
			<u-icon size="25" color="#FFAA00" name="error-circle-fill"></u-icon>
			<text style="font-size: 10px;margin-left: 5px;">下单超过24小时后无法退款；有登录过的学员无法退款</text>
		</view>
		<view class="padding-30rpx" >
			<view class='padding-30rpx bg-white' style="padding-bottom: 0;">
				<view style="font-size: 14px;padding-bottom: 10px;">
					<text style="font-weight: bold;color: #333333;" :user-select="true">订单编号：{{data.orderNum}}</text>
          <text v-if="data.orderNum" class="copy-text" @click="copyHandle(data.orderNum)">复制</text>
				</view>
				<view class="" style="background-color: rgba(0,0,0,0.1);height: 1px;">
				</view>
				<u-checkbox-group v-model="data.form.selectedIndexList" @change="changeSelectedHandle">
					<view class="flex-jc-s-b" style="white-space: nowrap;padding: 15px 0;width: 100%;"
						v-for="item,index in data.studentList"
						:style="index != data.studentList.length -1 ? {'border-bottom':'1px solid rgba(0,0,0,0.1)'}:''">
						<u-checkbox shape="circle" :label="''" :size="32" :name="index" :disabled="item.loginFlag!=0"/>
						<view class="flex-column" style="align-items: flex-start;margin-left: 5px;">
							<view class="">
								<text style="font-weight: bold;font-size: 15px;color: #333333;">{{item.name}}</text>
								<text class="label-pain-gary" style="margin-left: 5px;">{{item.idCard}}</text>
							</view>
							<text style="margin-top: 3px;font-size: 13px;">{{item.courseName}}</text>
						</view>
						<view class="" style="color: #EB5940;font-size: 13px">
							<text>￥</text>
							<text style="font-size: 18px;font-weight: bold;">{{item.price}}</text>
							<text style="font-size: 13px;white-space: nowrap;color: #333333;">/{{item.dayAmount}}天</text>
						</view>
					</view>
				</u-checkbox-group>
			</view>

			<view class="padding-30rpx white-bg scroll-item" v-if="data.payMethodCode != 'wechat'" style="border-radius: 8px;margin: 15px 0;">
				<view>
					<text style="font-size: 14px;font-weight: bold;">退款账号</text>
					<text class="color-gray" style="font-size: 11px;margin-left:5px;">预计1-7个工作日内退回原账户</text>
				</view>

				<view style="font-size: 12px;margin:15px 0 0 0px;">
					<view class="flex-al-center" style="padding-bottom: 10px;">
						<text style="margin-right: 15px;">原账户名称</text>
						<u-input v-model="data.form.accountName" fontSize="12px" border="none" placeholder="请输入原账户名称"></u-input>
					</view>
					<u-line color="#0000001A"></u-line>
					<view class="flex-al-center" style="margin-top: 10px;">
						<text style="margin-right: 15px;">原退款账号</text>
						<u-input v-model="data.form.account"  fontSize="12px" border="none" placeholder="请输入原退款账号"></u-input>
					</view>
				</view>
			</view>
			<view class="padding-30rpx white-bg scroll-item" style="margin-top: 10px;border-radius: 8px;">
				<text style="font-size: 14px;font-weight: bold;">退款原因</text>
				<u--textarea :customStyle="{'margin-top': '5px','background-color': '#F7F7F7','border': 'none','padding-bottom': '5px','font-size': '12px'}" height="100" :maxlength="100"
					v-model="data.form.description" :count="true" placeholder="请输入内容"></u--textarea>
			</view>
		</view>
		<view class="" style="height: 85px;"></view>
		<view class="padding-30rpx white-bg flex-jc-s-b bottom-bar" style="">
			<view class="flex-al-center">
				<u-checkbox-group v-model="data.allCheck" @change="allChange">
					<u-checkbox shape="circle" :label="''" :size="32"></u-checkbox>
				</u-checkbox-group>
				<text>全选</text>
			</view>
			<view style="color: #EB5940;font-size: 13px;margin-top: 5px;display: flex;align-items: flex-end;justify-content: flex-end">
				<view style="margin-bottom: 2px;margin-right: 10px;">
					<text style="white-space: nowrap;color: #333333;">预计退款:</text>
					<text class="font-small">￥</text>
					<text style="font-size: 22px;font-weight: bold;">{{calcTotalPrice(data.form.selectedIndexList)}}</text>
				</view>
				<u-button @click="confirmHandle" :customStyle="{'width':'100px',margin:'0'}" type="primary" shape="circle"
					text="提交申请"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { addRefund, listStudent } from "../const";
  import pageRoute from "../../../utils/pageRoute";
  import { copyHandle } from "@/utils/common.js"
	const data = reactive({
		id: '',
		orderNum: '',
		payMethodCode: '',
		allCheck: [],
		form: {
			orderId: '', //订单id
			itemIdList: [],
			accountName: "", //账户名称
			account: "", //账户账号
			description: "" ,//退款说明
			selectedIndexList: []
		},
		studentList: [],
		totalPrice: ''
	})
	onLoad((options) => {
		data.id = options.id
		data.orderNum = options.orderNum
		data.payMethodCode = options.payMethodCode
		data.form.orderId = data.id
		ajaxListStudent(data.id)
	})
	const confirmHandle = () => {
		let form = data.form
		let checkKey = ''
		let tipContent = ''
		for (const key in form) {
			if (data.payMethodCode == 'wechat'){
				if (key == 'accountName' || key == 'account'){
					continue
				}
			}
			if (!form[key]) { checkKey = key; break }
		}
		if (form.selectedIndexList.length == 0) { checkKey = 'selectedIndexList'; }
		switch (checkKey) {
			case 'selectedIndexList':
				tipContent = '请选择退款人员';
				break;
			case 'accountName':
				tipContent = '请输入账户名称';
				break;
			case 'account':
				tipContent = '请输入退款账号';
				break;
			case 'description':
				tipContent = '请输入退款说明';
				break;
				// case 'bankName': tipContent='请输入银行账号';break;
		}
		if (checkKey) {
			uni.showToast({ title: tipContent, duration: 1200, icon: "none" })
			return
		 }

		ajaxAddRefund()
	}
	const allChange = (val) => {
		if (val.length == 0) {
			data.form.selectedIndexList = []
		} else {
			let list = data.studentList
			let selectedIndexList = []
			list.forEach((item, index)=>{
				selectedIndexList.push(index)
			})
			data.form.selectedIndexList = selectedIndexList
		}
	}

	const ajaxListStudent = (id) => {
		let reqObj = {orderId: id}
		listStudent(reqObj).then((res) => {
			data.studentList = res.rows
		})
	}

	const ajaxAddRefund = () => {
		let reqObj = data.form
		let list = getSelectedList()
		let itemIdList = []
		list.forEach((item)=>{
			itemIdList.push(item.id)
		})
		reqObj.itemIdList = itemIdList
		addRefund(reqObj).then((res) => {
			uni.showToast({ title: '申请成功', duration: 1200, icon: "none" })
      setTimeout(() => {
        pageRoute.routeRedirect('pages/order/query', {type: 'refunding'})
      }, 500)
		})
	}

	const calcTotalPrice = (selectedIndexList) => {
		let list = getSelectedList()
		let totalPrice = 0;
		list.forEach((item) => {
			totalPrice += item.price
		});

		data.totalPrice = totalPrice

		return totalPrice
	}

	const getSelectedList = () => {
		let selectedIndexList = data.form.selectedIndexList
		let list = data.studentList
		let rsList = []
		selectedIndexList.forEach((item) => {
			let index = item
			let student = list[index]
			rsList.push(student)
		});

		return rsList
	}

	const changeSelectedHandle = () => {
		calcTotalPrice()
	}
</script>

<style lang="scss">
	.refund-button {
		position: fixed;
		width: 100%;
		bottom: 15px;
		left: 0;
	}
  .copy-text {
    margin-left: 10px;
    font-size: 12px;
    padding: 0 6px;
    background-color: #F6F6F6;
    border-radius: 8px
  }
</style>
